import {useEffect, useState}  from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import {CustomRoute} from "./MyRoutes"
import Container from '@mui/material/Container';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import MenuLayout from './MenuLayout'
import {getCategory} from './Api'




// TODO remove, this demo shouldn't need to reset the theme.
const defaultTheme = createTheme();

export default function Index() {
    const [category,setCategory] = useState<{title:string,router:string,id:string}[]>([])
    console.log("Index")
    
  useEffect(()=>{
    setCategory(getCategory())
    console.log("getCategory"+JSON.stringify(category))
  },[])

  return (
    <ThemeProvider theme={defaultTheme}>
      <CssBaseline />
      <Container maxWidth="lg">
        <MenuLayout title="Blog" list={category}/>
        <main>
            <CustomRoute/>
        </main>
        {/* <main>
        <MainFeaturedPost post={mainFeaturedPost} />
         <MyRoutes/>
        </main> */}
      </Container>
      {/* <Footer
        title="Footer"
        description="Something here to give the footer a purpose!"
      /> */}
    </ThemeProvider>
  );
}
